import React, { useState, useEffect } from 'react'
import {
    Form,
    Input,
    Button,
    Table,
    Space,
    Select,
    Popconfirm,
    message
} from 'antd';
import request from "../../utils/request";

import "./Indent.css"

const Indent = () => {
    const [Ident, setIdent] = useState([]);
    useEffect(() => {
        getter();
    }, [])
    //获取
    const getter = async () => {
        const res = await request({
            url: "/api/GetIdent",
            method: "get",
        })
        if (res.code === 200) {
            setIdent(res.data)
        }
    }
    const onFinish = async (values) => {
        if (!values.type) values.type = "";
        if (!values.phone) values.phone = "";
        let res = await request({
            url: '/api/searchIdent',
            method: "get",
            params: {
                ...values,
            }
        })
        setIdent(res.data);
    }
    //表格
    const { Column } = Table;
    const { Option } = Select;
    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/DeleteIdent",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter();
    }
    return (
        <div className="Indent">
            <div className="IndentHeader">
                订单管理
            </div>
            <div className="IndentMain">
                <div className="IndentTop">
                    <Form name="complex-form" onFinish={onFinish} >
                        <Form.Item
                            name="type"
                            label="订单类型:"
                        >
                            <Select
                                placeholder="请选择"
                            >
                                <Option value="">请选择</Option>
                                <Option value="二手房出租">二手房出租</Option>
                                <Option value="有房出租">有房出租</Option>
                                <Option value="我想买个房">我想买个房</Option>
                                <Option value="我想租个房">我想租个房</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="phone"
                            label="搜索:"
                        >
                            <Input placeholder="请输入手机号/订单号" />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Indentmain">
                    <Table dataSource={Ident} bordered>
                        <Column title="序号" dataIndex="key" key="key" align="center" />
                        <Column title="编号" dataIndex="id" key="id" align="center" />
                        <Column title="用户名" dataIndex="name" key="name" align="center" />
                        <Column title="手机号" dataIndex="phone" key="phone" align="center" />
                        <Column title="类型" dataIndex="type" key="type" align="center" />
                        <Column title="支付金额" dataIndex="price" key="price" align="center" />
                        <Column title="支付时间" dataIndex="date" key="date" align="center" />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space>
                                    <Popconfirm
                                        title="是否要删除？请再次确定"
                                        onConfirm={() => Delete(record)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <a>删除</a>
                                    </Popconfirm>
                                </Space>
                            )}
                            align="center" />
                    </Table>
                </div>
            </div>
        </div>
    )
}

export default Indent
